<template>
	<view class="container">
		<view class="withdrawal-box">
			<view class="box-title">请输入充值金额</view>
			<view class="input-box">
				<u-input v-model.trim="amount" type="digit" border="bottom" focus clearable fontSize="60rpx" color="#FF6413"
					:customStyle="{padding:'6rpx 0'}">
					<span slot="prefix" class="symbol">¥</span>
				</u-input>
			</view>
		</view>

		<view class="type-box">
			<view class="box-title">充值方式</view>
			<view class="type-item f-c-between">
				<view class="f-a-center">
					<u-icon name="weixin-fill" color="#00C800" size="28"></u-icon>
					<span class="pay-title">微信</span>
				</view>
				<image src="/static/home/icon-selected.png" class="icon-selected"></image>
			</view>
		</view>

		<u-button shape="circle" color="#FFC046" class="btn-withdrawal" :customStyle="customButtonStyle"
			@click="btnRecharge">充值</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fromType: 'recharge',
				amount: '',
				customButtonStyle: {
					marginTop: '44rpx',
					fontSize: '32rpx'
				},
			}
		},
		onLoad(option) {
			if (option.from == 'app') {
				this.fromType = option.from
				this.amount = option.amount
				this.btnRecharge()
			}
		},
		methods: {
			//充值按钮
			btnRecharge() {
				if (!this.$u.test.amount(this.amount)) {
					this.$showToast('请输入正确的金额')
					return
				}

				this.$u.debounce(() => {
					// #ifdef MP-WEIXIN
					this.$api.get_wechat_recharge({
						amount: this.amount,
					}).then(data => {
						this.$util.payUtil(data).then(res => {
							this.$store.dispatch('get_userInfo')
							uni.navigateTo({
								url: '/pages/cart/payResult?fromType=' + this.fromType
							})
						}).catch(err => {
							console.log(err);
						})
					})
					// #endif

					// #ifdef APP
					this.navigatorWxPay()
					// #endif
				}, 300)
			},

			//跳转到微信
			navigatorWxPay() {
				let params = {
					from: 'app',
					amount: this.amount,
					token: this.token,
					pageType: 'recharge'
				}
				this.$util.navigatorWxProgramUtil(params)
			}
		}
	}
</script>

<style>
	page {
		background-color: #F4F7F7;
	}
</style>
<style lang="scss" scoped>
	.container {
		padding: 20rpx 44rpx;
	}

	.withdrawal-box {
		background: #FFFFFF;
		border-radius: 14rpx;
		padding: 22rpx 40rpx 44rpx 36rpx;

		.box-title {
			font-weight: 400;
			// font-size: 24rpx;
			font-size: calc(24rpx * 1.5);
			color: rgba(51, 51, 51, 0.8);
		}

		.input-box {
			padding: 28rpx 5rpx 0;

			.symbol {
				font-weight: 400;
				// font-size: 36rpx;
				font-size: calc(36rpx * 1.5);
				color: #FF6413;
				padding-top: 18rpx;
			}
		}

		.money-tips {
			font-weight: 400;
			// font-size: 20rpx;
			font-size: calc(20rpx * 1.5);
			color: rgba(51, 51, 51, 0.8);
			margin-top: 16rpx;
			padding-left: 5rpx;

			&.over {
				color: #FF6413;
			}
		}

	}

	.type-box {
		background: #FFFFFF;
		border-radius: 14rpx;
		padding: 18rpx 44rpx 52rpx 36rpx;
		margin-top: 28rpx;

		.box-title {
			font-weight: 400;
			// font-size: 28rpx;
			font-size: calc(28rpx * 1.2);
			color: #333333;
			margin-bottom: 32rpx;
		}

		.pay-title {
			font-weight: 400;
			// font-size: 28rpx;
			font-size: calc(28rpx * 1.2);
			color: #333333;
			margin-left: 20rpx;
		}

		.icon-selected {
			width: 48rpx;
			height: 48rpx;
		}
	}

	.btn-withdrawal {
		margin-top: 44rpx;
	}

	.rule-box {
		margin-top: 44rpx;
		padding-left: 42rpx;

		.rule-title {
			font-weight: 400;
			// font-size: 20rpx;
			font-size: calc(20rpx * 1.2);
			color: #666666;
			margin-right: 10rpx;
		}

		.rule-list {
			font-weight: 400;
			// font-size: 20rpx;
			font-size: calc(20rpx * 1.2);
			color: #9DA3B4;
		}
	}
</style>